import React from 'react';
import './index.less'
import { Form, Input } from 'antd'
import useRouter from 'components/hooks/useRouter';
import { loginApi } from 'services/api';
const formLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}
const Login = () => {
    const router = useRouter()
    const [form] = Form.useForm()
    const login = async () => {
        const data = await form.validateFields()
        const token = await loginApi({ login_name: data.userName, login_pass: data.password })
        localStorage.setItem('token', token)
        localStorage.setItem('login_name', data.userName)
        router.push('/userManage')
    }
    const keydown = (e: any) => {
        if (e.key === 'Enter') {
            login()
        }
    }
    return (
        <div className="login flex-center">
            <div className="login-box">
                <div className="login-header flex-between">
                    <div className="flex">
                        <img className="mr10" src={require('assets/images/round-blue.png')} alt=""/>
                        <img src={require('assets/images/round-yellow.png')} alt=""/>
                    </div>
                    <div style={{ fontSize: 20, color: '#fff' }}>
                        你好 欢迎使用管理后台系统
                    </div>
                </div>
                <Form form={form} style={{ padding: '40px 60px', width: 400, color: 'green' }} {...formLayout} colon={false} requiredMark={false} >
                    <Form.Item label={<span className="login-label">用户名</span>} name="userName" rules={[{ required: true, message: '请输入用户名' }]}>
                        <Input placeholder="请输入用户名" allowClear />
                    </Form.Item>
                    <Form.Item label={<span className="login-label">密码</span>}  name="password" rules={[{ required: true, message: '请输入密码' }]}>
                        <Input placeholder="请输入密码" onKeyDown={keydown} allowClear />
                    </Form.Item>
                    <div onClick={login} className="text-center font-20" 
                        style={{ backgroundColor: '#47C68F', color: '#fff', padding: 5, borderRadius: 5, cursor: 'pointer' }}>
                        登  录
                    </div>
                </Form>
            </div>
        </div>
    )
}
export default Login